<template>
  <div v-bind:style="{overflowY:issee == true ? 'hidden':''}">
    <div class="detail-box" v-if="isload && given_data">
    <div
      class="detail-header"
      v-bind:style="{
        color: isOpacity == false ? '#fff' : '#000',
        backgroundColor: isOpacity == false ? '' : '#fff'
      }"
    >
      <div class="header-icon">
        <div class="header-back-box">
          <div class="back-icon" v-on:click="goback()">
            <i class="iconfont icon-fanhui"></i>
          </div>
          <div class="header-img" v-if="isOpacity">
            <img v-bind:src="given_data.user.user_photo" alt="" />
          </div>
          <div class="guanzhu-box" v-if="isOpacity">关注</div>
        </div>
        <div class="header-icon-box">
          <div class="pengyouquan-box">
            <i class="iconfont icon-pengyouquan"></i>
          </div>
          <div class="weixin-box">
            <i class="iconfont icon-weixin"></i>
          </div>
          <div class="gengduo-box">
            <i class="iconfont icon-gengduo"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-main">
      <div class="detail-food-photo">
        <!-- 视频或图片 -->
        <video v-bind:src="given_data.vfurl" controls v-if="given_data.vfurl" autoplay></video>
        <img v-bind:src="given_data.thumb_path" v-else alt="" />
      </div>

      <div class="detail-data-food-box">
        <div class="detail-food-name">
          {{ given_data.title }}
        </div>
        <div class="detail-food-somedata">
          浏览{{ given_data.views_count_text }} &nbsp;.&nbsp; 收藏{{
            given_data.favo_counts_text
          }}
        </div>
        <div class="detail-created-data-box">
          <div class="detail-created-boxleft">
            <div class="created-headimg">
              <img v-bind:src="given_data.user.user_photo" alt="" />
            </div>
            <div class="created-name">{{ given_data.user.nickname }}</div>
            <div class="created-lv">lv{{ given_data.user.lvl }}</div>
          </div>
          <div class="detail-created-boxright">关注</div>
        </div>
        <div class="detail-cookstory" v-if="given_data.cookstorys[0]">
          <div class="cooksstory-box1">
            {{ given_data.cookstorys[0].c}}&nbsp;
          </div>
          <div class="cooksstory-box2" v-if="given_data.cookstorys[2]">
            <a href="javascript:;">{{ given_data.cookstorys[1].c }}{{given_data.cookstorys[2].c}}</a>
          </div>
        </div>
        <div class="detail-time-diff" v-if="given_data.cook_time">
          <div class="detail-time-box">
            <div class="time-icon-box">
              <i class="iconfont icon-shijian"></i>
            </div>
            <div class="detail-time-range">
              {{ given_data.cook_time }}
            </div>
          </div>
          <div class="detail-diff-box">
            <div class="diff-icon-box"></div>
            <div class="detail-diff-grade">
              {{ given_data.cook_difficulty }}
            </div>
          </div>
        </div>
      </div>

      <div class="detail-ingredients-box">
        <div class="ingredients-text">
          <div class="text-left">食材清单</div>
          <div class="text-right" v-on:click="isaddcar = !isaddcar">
            {{ isaddcar == false ? "加入购物清单" : "移除购物清单" }}
          </div>
        </div>
        <ul>
          <li v-for="item in ingredients_list" v-bind:key="item.id">
            <div class="ingredients-left">
              <!-- <a v-bind:href=""></a> -->
              <a
                href="javascript:;"
                v-bind:style="{ color: item.tu == null ? '#000' : '#00f' }"
                >{{ item.title }}</a
              >
            </div>
            <div class="ingredients-right">{{ item.note }}</div>
          </li>
        </ul>
        <div class="detail-nutrition_facts-box">
          <div class="nutrition_facts-text">
            <div class="nutrition_facts-text-left">营养分析</div>
            <div class="nutrition_facts-text-right">查看详情</div>
          </div>
          <div class="nutrition_facts-data-box">
            <ol class="data-box-left">
              <li v-for="item in nutrition_list" v-bind:key="item.id">
                <div
                  class="icon-color"
                  v-bind:style="{ backgroundColor: item.color }"
                ></div>
                <div class="nutrient">{{ item.nutrient }}</div>
                <!-- <div class="calorie">{{item.calorie}}</div> -->
                <div class="amount">{{ item.amount }}</div>
              </li>
            </ol>
            <div class="data-box-right">
              {{ given_data.energy }}
              <br />
              千卡
            </div>
          </div>
          <div class="nutrition_facts-hint-text"><i class="iconfont icon-tishi"></i>{{given_data.nutrition_facts_hint_text}}</div>
        </div>
        
      </div>

      <div class="detail-cook-steps">
        <div class="detail-cook-text">
          <div class="cook-text-left">烹饪步骤</div>
          <div class="cook-text-right">点击图片进入烹饪模式</div>
        </div>
        <ul>
          <li v-for="item in cookstep_list" v-bind:key="item.position">
            <div class="cook-step">步骤{{item.position+'/'+cookstep_list.length}}</div>
            <div class="cook-img">
              <img v-bind:src="item.thumb" alt="">
            </div>
            <div class="cook-step-words">{{item.content}}</div>
          </li>
        </ul>
      </div>

      <div class="public-time">
        {{given_data.release_time}}
      </div>
      <div class="tip-cook">
        <div class="tip-text" v-if="given_data.tips">小贴士</div>
        <div class="tip-words">{{given_data.tips}}</div>
        <div class="comments-box" v-if="given_data.comments_count > 0">
          <div class="comments-text">
            <div class="ctext">热门评论</div>
            <div class="c-count">{{given_data.comments_count}}条评论</div>
          </div>
          <div class="c-input"></div>
          <ul>
            <!-- 只循环前三个 -->
            <li v-for="item in comments_list.slice(0,3)" v-bind:key="item.id">
              <div class="comments-user-box">
                <div class="comments-user-headimg">
                  <img v-bind:src="item.u.p" alt="">
                </div>
                <div class="user-name">{{item.u.n}}</div>
                <div class="user-lv">lv{{item.u.lvl}}</div>
              </div>
              <div class="comments-text">{{item.content[0].c}}</div>
            </li>
            <div v-if="comments_list.length > 3" v-on:click="seemore()" class="getmore">查看更多评论</div>
          </ul>
        </div>
        <div class="tip-upload">传学做</div>
      </div>
    </div>
    <div class="detail-footer">
      <div class="detail-inp-box">
        <input type="text" placeholder="说点什么">
      </div>
      <div class="detail-footer-icons">
        <div class="pinglun-icon" v-on:click="seemore">
          <i class="iconfont icon-pinglun"></i>
          <div class="text">评论</div>
        </div>
        <div class="shoucang-icon">
          <i class="iconfont icon-shoucang"></i>
          <div class="text">收藏</div>
        </div>
        <div class="chuanxuezuo">
          <i class="">o</i>
          <div class="text">传学做</div>
        </div>
      </div>
    </div>
    <transition name="donghua">
      <div class="more-data" v-show="issee">
        <ul>
          <div class="close" v-on:click="issee = !issee">
            <i class="iconfont icon-guanbi"></i>
          </div>
          <li v-for="item in comments_list" v-bind:key="item.id">
              <div class="comments-user-box">
                <div class="comments-user-headimg">
                  <img v-bind:src="item.u.p" alt="">
                </div>
                <div class="user-name">{{item.u.n}}</div>
                <div class="user-lv">lv{{item.u.lvl}}</div>
              </div>
              <div class="comments-text">{{item.content[0].c}}</div>
            </li>
        </ul>
    </div>
    </transition>
  </div>
  <div v-else>
    <jia-zai></jia-zai>
  </div>
  </div>
</template>

<script>
import jiaZai from '@/components/jiazai.vue'
export default {
  components:{
    jiaZai
  },
  data() {
    return {
      given_data: [],
      given_id: 0,
      isOpacity: false,
      isaddcar: false,
      ingredients_list: [],
      nutrition_list: [],
      cookstep_list: [],
      comments_list: [],
      isload:false,
      issee:false
    };
  },
  methods: {
    seemore(){
      this.issee = true;
      console.log("see  ");
    },
    getdata() {
      // console.log(lists,Array.isArray(lists));
      let given_food = JSON.parse(localStorage.getItem("given_food"));

      let _this = this;
      let url = 
        "https://apis.netstart.cn/douguo/recipe/detail/" + this.given_id;
      let url1 = `https://apis.netstart.cn/douguo/recipe/flatcomments/${this.given_id}/0/20`;
      let comments = axios.get(url1);
      comments.then(
        res=>{
          // console.log(res,"comments");
          // console.log(res.data.result.comments);
          _this.comments_list = res.data.result.comments;
          
          console.log(_this.comments_list[0].content[0].c,"1111");
        }
      )
      if (given_food && given_food.cook_id == this.given_id) {
        this.given_data = given_food;
        console.log(this.given_data.vfurl,"视频");
        given_food.major.forEach((item) => {
          let obj = {};
          obj.title = item.title;
          obj.note = item.note;
          obj.tu = item.tu;
          obj.id = Symbol();
          this.ingredients_list.push(obj);
        });
        given_food.nutrition_facts.forEach((item) => {
          let obj = {};
          obj.nutrient = item.nutrient;
          obj.calorie = item.calorie;
          obj.amount = item.amount;
          obj.color = item.pie_chart_color;
          obj.id = Symbol();
          this.nutrition_list.push(obj);
        });
        this.cookstep_list = given_food.cookstep;
        // console.log(this.nutrition_list);
      } else {
        this.given_data = [];
        let promice = axios.get(url);
        
        promice.then((res) => {
          // console.log(res);
          if (res.status == 200 && res.data.state == "success") {
            // console.log(res.data.result.recipe);
            _this.given_data = res.data.result.recipe;
            _this.cookstep_list = res.data.result.recipe.cookstep;
            res.data.result.recipe.major.forEach((item) => {
              let obj = {};
              obj.title = item.title;
              obj.note = item.note;
              obj.tu = item.tu;
              obj.id = Symbol();
              _this.ingredients_list.push(obj);
            });
            res.data.result.recipe.nutrition_facts.forEach((item) => {
              let obj = {};
              obj.nutrient = item.nutrient;
              obj.calorie = item.calorie;
              obj.amount = item.amount;
              obj.color = item.pie_chart_color;
              obj.id = Symbol();
              _this.nutrition_list.push(obj);
            });
            // console.log(_this.nutrition_list);
            localStorage.setItem(
              "given_food",
              JSON.stringify(_this.given_data)
            );
          }
        });
      }
      this.isload = true;
    },
    goback() {
      this.$router.go(-1);
    },
    
  },
  created() {
    // console.log(this.$route.query.id);
    let getid = this.$route.query.id;
    // console.log(getid,typeof getid);
    this.given_id = parseInt(getid);
    this.getdata();
    window.scrollTo(0,0)
    // console.log(localStorage.getItem('guanzhu_list'));
  },
  mounted() {
    let _this = this;
    var startY = 0;
    var endY = 0;
    // window.onscroll = function () {
    //   let h = document.documentElement.scrollTop;
    //   // console.log(a);
    //   if (h > 200) {
    //     _this.isOpacity = true;
    //   } else {
    //     _this.isOpacity = false;
    //   }
    // };
    window.addEventListener("touchmove",function(e){
      var touch = e.touches[0];
      startY = touch.clientY;
      endY = touch.pageY;
      var distanceY = endY - startY;
      if(distanceY >=200){
        _this.isOpacity = true;
      }else{
        _this.isOpacity = false;
      }
    })
  },
};
</script>

<style lang="scss">
body{
  margin: 0;
}
.detail-box {
  width: 100%;
  .detail-header {
    width: 100%;
    height: 80px;
    padding-top: 30px;
    // background-color: white;
    box-sizing: border-box;
    position: fixed;
    z-index: 1;
    // background-color: red;
    .header-icon {
      height: 50px;
      // background-color: red;
      display: flex;
      .header-back-box {
        width: 50%;
        height: 50px;
        padding-top: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: start;
        // background-color: #ccc;
        .back-icon {
          height: 30px;
          // background-color: green;
          font-size: 0;
          padding-left: 10px;
          box-sizing: border-box;
          // margin-left: 5px;
          i {
            font-size: 30px;
            height: 30px;
            line-height: 30px;
          }
        }
        .header-img {
          width: 40px;
          height: 40px;
          font-size: 0;
          margin-top: -5px;
          margin-left: 5px;
          margin-right: 5px;
          img {
            width: 100%;
            height: 40px;
            border-radius: 50%;
          }
        }
        .guanzhu-box {
          width: 80px;
          height: 30px;
          background-color: yellow;
          border-radius: 15px;
          // margin-top: -5px;
          font-size: 20px;
          text-align: center;
          line-height: 30px;
        }
      }
      .header-icon-box {
        width: 50%;
        height: 50px;
        padding-top: 10px;
        box-sizing: border-box;
        // background-color: #ccc;
        display: flex;
        justify-content: space-around;
        .pengyouquan-box,
        .weixin-box,
        .gengduo-box {
          height: 30px;
          width: 30px;
          font-size: 0;
          i {
            font-size: 30px;
          }
        }
      }
    }
  }
  .detail-main {
    // height: 1200px;
    .detail-food-photo {
      width: 100%;
      margin: 0;
      video{
        width: 100%;
      }
      img {
        margin: 0;
        width: 100%;
      }
    }
    // background-color: red;
    .detail-data-food-box {
      padding: 0 10px;
      box-sizing: border-box;
      // height: 300px;
      // background-color: red;
      .detail-food-name {
        height: 30px;
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
      }
      .detail-food-somedata {
        height: 20px;
        // background-color: pink;
        display: flex;
        justify-content: start;
        font-size: 12px;
        margin-bottom: 30px;
        line-height: 20px;
      }
      .detail-created-data-box {
        height: 50px;
        position: relative;
        padding: 10px 0;
        display: flex;
        justify-content: start;
        .detail-created-boxleft {
          width: 70%;
          height: 30px;
          // background-color: pink;
          display: flex;
          .created-headimg {
            width: 30px;
            height: 30px;
            font-size: 0;
            margin-right: 5px;
            img {
              font-size: 30px;
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .created-name {
            height: 30px;
            font-size: 14px;
            line-height: 30px;
          }
          .created-lv {
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            color: gold;
          }
        }
        .detail-created-boxright {
          // width: 30%;
          height: 30px;
          background-color: orange;
          width: 80px;
          position: absolute;
          right: 10px;
          border-radius: 15px;
          text-align: center;
          line-height: 30px;
          font-size: 14px;
        }
        // background-color: red;
      }
      .detail-cookstory {
        // height: 30px;
        // display: flex;
        font-size: 14px;
        // line-height: 30px;
        margin-bottom: 10px;
        .cooksstory-box1 {
          // height: 30px;
          // width: 70%;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          // overflow: hidden;
        }
        .cooksstory-box2 {
          // height: 30px;
          // width: 30%;
          // text-align: right;
          a {
            color: blue;
          }
        }
      }

      .detail-time-diff {
        width: 100%;
        height: 30px;
        // background-color: pink;
        display: flex;
        justify-content: space-around;
        .detail-time-box {
          width: 40%;
          background-color: #fff;
          display: flex;
          justify-content: start;
          .time-icon-box {
            font-size: 0;
            i {
              height: 30px;
              width: 30px;
              font-size: 25px;
              line-height: 30px;
            }
          }
          .detail-time-range {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
          }
        }
        .detail-diff-box {
          width: 40%;
          // background-color: #ccc;
          display: flex;
          justify-content: start;
          .diff-icon-box {
            width: 30px;
            height: 30px;
          }
          .detail-diff-grade {
            height: 30px;
            line-height: 30px;
            font-size: 16px;
          }
        }
      }
    }

    .detail-ingredients-box {
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      .ingredients-text {
        height: 30px;
        display: flex;
        position: sticky;
        background-color: white;
        top: 70px;
        justify-content: space-between;
        .text-left {
          height: 30px;
          font-size: 14px;
          font-weight: 600;
          width: 50%;
          line-height: 30px;
        }
        .text-right {
          height: 30px;
          font-size: 12px;
          color: blue;
          width: 50%;
          line-height: 30px;
          text-align: right;
        }
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
          height: 30px;

          display: flex;
          .ingredients-left {
            width: 50%;
            height: 30px;
            line-height: 30px;

            a {
              font-size: 14px;
            }
          }
          .ingredients-right {
            width: 50%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            text-align: right;
          }
        }
      }
    }
    .detail-nutrition_facts-box {
      margin-top: 10px;
      // height: 100px;
      .nutrition_facts-text {
        display: flex;
        position: sticky;
        justify-content: start;
        background-color: white;
        top: 80px;
        height: 30px;
        font-size: 16px;
        .nutrition_facts-text-left {
          height: 30px;
          width: 50%;
          line-height: 30px;
          font-size: 20px;
        }
        .nutrition_facts-text-right {
          height: 30px;
          width: 50%;
          text-align: right;
          font-size: 14px;
          color: skyblue;
        }
      }
      .nutrition_facts-data-box {
        width: 100%;
        display: flex;
        ol {
          width: 70%;
          // height: 50px;
          // background-color: red;
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            width: 100%;
            height: 30px;
            // background-color: pink;
            display: flex;
            justify-content: start;
            .icon-color {
              width: 10px;
              height: 10px;
              margin-top: 10px;
              border-radius: 50%;
            }
            .nutrient {
              height: 30px;
              width: 60%;
              padding-left: 10px;
              font-size: 12px;
              line-height: 30px;
            }
            .amount {
              height: 30px;
              font-size: 12px;
              line-height: 30px;
            }
          }
        }
        .data-box-right {
          width: 30%;
          text-align: center;
          font-size: 18px;
        }
      }
      .nutrition_facts-hint-text {
        height: 30px;
        font-size: 12px;
        // background-color: red;
        line-height: 30px;
        i{
          color: yellow;
        }
        // margin-top: 5px;
      }
    }

    .detail-cook-steps{
      width: 100%;
      margin-top: 5px;
      padding: 0 10px;
      box-sizing: border-box;
      .detail-cook-text{
        height: 30px;
        display: flex;
        position: sticky;
        background-color: white;
        top: 70px;
        .cook-text-left{
          width: 50%;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
        }
        .cook-text-right{
          width: 50%;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: skyblue;
          text-align: right;
        }
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        li{
          // height: 30px;
          width: 100%;
          // background-color: red;
          .cook-step{
            padding: 5px 0;
            font-size: 12px;
            height: 30px;
            line-height: 30px;
            position: sticky;
            top: 70px;
            box-sizing: border-box;
            background-color: white;
          }
          .cook-img{
            width: 100%;
            font-size: 0;
            img{
              width: 100%;
            }
          }
          .cook-step-words{
            padding: 10px 0;
            font-size: 16px;
          }
        }
      }
    }
    .public-time{
      
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      padding: 0px 20px;
      box-sizing: border-box;
      
    }
    .tip-cook{
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 60px;
        .tip-text{
          height: 30px;
          font-size: 16px;
          font-weight: 600;
        }
        .tip-words{
          padding: 5px;
          font-size: 14px;
          margin-bottom: 0px;
        }

        .comments-box{
          width: 100%;
          padding: 0 10px;
          box-sizing: border-box;
          .comments-text{
            height: 30px;
            display: flex;
            justify-content: start;
            .ctext{
              height: 30px;
              font-size: 18px;
              font-size: 600;
              line-height: 30px;
              margin-right: 10px;
            }
            .c-count{
              height: 30px;
              font-size: 12px;
              line-height: 30px;
              color: skyblue;
            }
          }
           ul{
              list-style: none;
              margin: 0;
              padding-bottom: 20px;
              li{
                .comments-user-box{
                  // height: 30px;
                  display: flex;
                  justify-content: start;
                  .comments-user-headimg{
                    height: 30px;
                    margin-right: 5px;
                    font-size: 0;
                    img{
                      
                      height: 30px;
                      width: 30px;
                      border-radius: 50%;
                    }
                  }
                  .user-name{
                    height: 30px;
                    font-size: 14px;
                    line-height: 30px;
                  }
                  .user-lv{
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    color: #bbaa5c;
                    margin-left: 2px;
                  }
                }
                .comments-text{
                  font-size: 14px;
                  // height: 30px;
                  margin-left: 35px;
                  
                  
                  
                }
              }
              .getmore{
                height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 12px;
                color: skyblue;
              }
              
            }
        }
        .tip-upload{
          width: 100%;
          height: 30px;
          font-size: 20px;
          border-radius: 15px;
          text-align: center;
          background-color: orange;
          line-height: 30px;

        }
      }
    }
    
    .detail-footer{
      height: 50px;
      position: fixed;
      background-color: white;
      bottom: 0;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      justify-content: start;
      // background-color: red;
      .detail-inp-box{
        width: 30%;
        height: 50px;
        padding-top: 10px;
        box-sizing: border-box;
        input{
          width: 100%;
          height: 30px;
          border-radius: 15px;
          background-color: none;
          outline: none;
          border: none;
          // border: 0;
          display: block;
          // margin-top: 10px;
          // border-color: black;
          border: 1px solid black;
          box-sizing: border-box;
          margin: 0;
          padding: 0;

          padding-left: 10px;
          font-size: 14px;
          &:focus{
            border-color: black;
          }
        }
      }
      .detail-footer-icons{
        width: 70%;
        height: 50px;
        padding: 10px 0px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-evenly;
        .pinglun-icon{
          width: 30%;
          height: 30px;
          display: flex;
          i{
             width: 30px;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
            border-radius: 5px;
            text-align: center;
            // background-color: orange;
          }
          .text{
            height: 30px;
            font-size: 16px;
            line-height: 30px;
          }
        }
        .shoucang-icon{
          width: 30%;
          height: 30px;
          display: flex;
          i{
             width: 30px;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
            border-radius: 5px;
            text-align: center;
            // background-color: orange;
          }
          .text{
            height: 30px;
            font-size: 16px;
            line-height: 30px;
          }
        }
        .chuanxuezuo{
          width: 30%;
          height: 30px;
          display: flex;
          i{
            width: 30px;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
            border-radius: 5px;
            background-color: orange;
          }
          .text{
            height: 30px;
            font-size: 16px;
            line-height: 30px;
          }
        }
      }
    }
    .more-data{
      width: 100%;
      height: 300px;
      position: fixed;
      bottom: 0px;
      left: 0;
      background-color: white;
      overflow-y: scroll;
      // opacity: 0;
      ul{
        width: 100%;
        position: relative;
        .close{
          position: relative;
          right: 5px;
          top: 5px;
          width: 30px;
          height: 30px;
          font-size: 0;
          i{
            position: fixed;
            right: 5px;
            // top: 5px;
            font-size: 30px;
          }
        }
        li{
                .comments-user-box{
                  height: 30px;
                  display: flex;
                  justify-content: start;
                  .comments-user-headimg{
                    height: 30px;
                    width: 30px;
                    margin-right: 5px;
                    font-size: 0;
                    img{

                      height: 30px;
                      width: 30px;
                      border-radius: 50%;
                    }
                  }
                  .user-name{
                    height: 30px;
                    font-size: 14px;
                    line-height: 30px;
                  }
                  .user-lv{
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    color: #bbaa5c;
                    margin-left: 2px;
                  }
                }
                .comments-text{
                  font-size: 14px;
                  // height: 30px;
                  margin-left: 35px;
                  
                }
              }
        
      }
    }
    .donghua-enter{
      bottom: -300px;
      opacity: 0;
    }
    .donghua-enter-active{
      transition: all 1s;
    }
    .donghua-enter-to{
      bottom: 0px;
      opacity: 1;
    }
    .donghua-leave{
      bottom: 0px;
      opacity: 1;
    }
    .donghua-leave-active{
      transition: all 1s;
    }
    .donghua-leave-to{
      bottom: -300px;
      opacity: 0;
    }


  
}
</style>